<template>
  <div class="students">
    <gov-layout-header>
      <el-button type="primary" size="small" @click="handleNew">新增</el-button>
    </gov-layout-header>
    <gov-layout-body>
      <avue-crud
        :data="tableList"
        :option="option"
        :page="page"
        @size-change="sizeChange"
        @current-change="currentChange">
        <template slot-scope="scope" slot="menu">
          <div class="table-btn-group">
            <el-button type="default" size="small" @click="handleDetail(scope.row)">详情</el-button>
            <el-button type="default" size="small" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button type="default" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </div>
        </template>
      </avue-crud>
    </gov-layout-body>
      <el-dialog :title="titleFilter" :visible.sync="dialogVisible">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="校园" prop="campus">
                    <template v-if="mode==='detail'">
                        <span class="see-span"> {{form.campus}}</span>
                    </template>
                    <template v-else>
                        <el-input class="nm-input" v-model="form.campus" placeholder="请输入校园" disabled></el-input>
                    </template>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="学院" prop="name">
                    <template v-if="mode==='detail'">
                        <span class="see-span"> {{form.name}}</span>
                    </template>
                    <template v-else>
                        <el-input class="nm-input" v-model="form.name" placeholder="请输入学院"></el-input>
                    </template>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer"  v-if="mode!='detail'">
          <el-button type="primary" :loading="submitting" @click="submitForm()">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { getcollege, delcollege, addcollege, updcollege } from '@/api/config'
import mixin from '@/mixins/mixin'

export default {
  mixins: [mixin],
  name: 'students',
  data () {
    return {
      page: {
        pageSizes: [10, 20, 30, 40],
        currentPage: 1,
        total: 0,
        pageSize: 10
      },
      searchOption: {
        limit: 10,
        page: 1
      },
      form: {},
      rules: {
        name: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      tableList: [],
      mode: 'list',
      title: '学院',
      submitting: false,
      option: {
        addBtn: false,
        delBtn: false,
        editBtn: false,
        columnBtn: false,
        refreshBtn: false,
        header: false,
        align: 'center',
        menuAlign: 'center',
        column: [
          {
            label: '学校',
            prop: 'campus'
          },
          {
            label: '学院',
            prop: 'name'
          }
        ]
      }
    }
  },
  computed: {
    titleFilter () {
      if (this.mode === 'create') {
        return this.title + '新增'
      } else if (this.mode === 'edit') {
        return this.title + '修改'
      } else if (this.mode === 'detail') {
        return this.title + '查看'
      } else {
        return this.title + this.mode
      }
    }
  },
  methods: {
    getList (params) {
      getcollege(params).then((response) => {
        this.tableList = response.data.data
        this.page.total = response.data.count
      })
    },
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.mode === 'create') {
            addcollege(this.form).then((response) => {
              this.dialogVisible = false
              this.getList(this.listQuery)
              this.$message('新增成功！')
            })
          } else if (this.mode === 'edit') {
            updcollege(this.form).then((response) => {
              this.dialogVisible = false
              this.getList(this.listQuery)
              this.$message('编辑成功！')
            })
          }
        } else {
          this.$message('请完成必填项！')
        }
      })
    },
    handleNew () {
      this.form = {}
      this.form.campus = this.userInfo.campus
      this.mode = 'create'
      this.dialogVisible = true
      if (this.$refs['form']) {
        this.$refs['form'].clearValidate()
      }
    },
    // 列表详情
    handleDetail (row) {
      this.form = row
      this.mode = 'detail'
      this.dialogVisible = true
    },
    // 列表编辑
    handleUpdate (row) {
      this.form = row
      this.mode = 'edit'
      this.dialogVisible = true
      if (this.$refs['form']) {
        this.$refs['form'].clearValidate()
      }
    },
    // 列表单条删除
    handleDelete (row) {
      this.$confirm('此操作将永久删除该班级信息, 是否继续?', '注意！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delcollege({ id: row._id }).then((response) => {
          this.$message.success('成功删除该班级信息！', row._id)
          this.getList(this.listQuery)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.listQuery = { page: 1, limit: 10, campus: this.userInfo.campus }
    this.getList(this.listQuery)
  }
}

</script>
